<template>
  <swiper class="swipter-box" ref="mySwiper" :options="swiperOptions">
    <swiper-slide class="context-box" v-for="(item,i) in topSongData" :key="i">
      <div class="itme-box" v-for="item2 in item" :key="item2.id">
        <van-image class="img" fit="cover" :src="item2.picUrl+'?param=100y100'" />
        <div class="singerInfo-box">
          <h3 class="title">{{item2.name}}</h3>
          <p class="singer-name">{{item2.artists}}</p>
        </div>
      </div>
    </swiper-slide>
  </swiper>
</template>

<script  type='module'>
import { SwiperSlide, Swiper } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

export default {
  name: 'carrousel',
  components: {
    Swiper, SwiperSlide
  },
  props: {
    topSongData: Array
  },
  data () {
    return {
      swiperOptions: {
        // loop: true,
        // slidesPerView: 'auto',
        slidesPerView: 1.8,
        spaceBetween: 14,
        freeMode: true,
        // slidesOffsetBefore: 200,
        // slidesOffsetAfter: 100,
        pagination: {
          el: '.swiper-pagination'
        }
        // Some Swiper option/callback...
      }
    }
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.$swiper
    }
  },
  mounted () {
    this.swiper.slideTo(3, 1000, false)
  }
}
</script>
 <style scoped lang="less">
.swipter-box {
  margin: 5px 12px;
  height: 179px;
  // .my-swipe {
  .context-box {
    box-shadow: 0 0 0.26667rem #ddd;
    margin-bottom: 14px;
    box-sizing: border-box;
    background-color: #fafafa;
    .itme-box {
      display: flex;
      margin-bottom: 5px;
      .img {
        width: 50px;
        height: 50px;
        flex-shrink: 0;
        border-radius: 5px;
        overflow: hidden;

      }
      .singerInfo-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
        padding: 0 5px;
        .title {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 15px;
          line-height: 18px;
          margin: 0px;
        }
        .singer-name {
          white-space: nowrap;
          overflow: hidden;
          margin: 0px;
          text-overflow: ellipsis;
          font-size: 13px;
          line-height: 22px;
        }
      }
    }
  }
}
</style>
